<!--
 * @FileDescription 毫米波协议定义计算填写
 * @Author 杨宇翔
 * @Date 20220628 10:31:18
 * @LastEditors 杨宇翔
 * @LastEditTime 20220628 10:31:18
-->
<template>
    <div class="parser">
        <div class="header">
            <span>数据协议解析训练</span>
            <button class="reset" type="button" @click="ProtocolComponent.Default.ShowTool.value = true">
                <span>进制转换器</span>
            </button>
            <button class="reset" type="button" v-if="!ExamComponent.Default.RegulationGame.value"
                @click="ProtocolComponent.Default.ShowParserReferences.value = !ProtocolComponent.Default.ShowParserReferences.value">
                <span>显示参考值</span>
            </button>
            <button class="reset" type="button" @click="ProtocolComponent.Default.SubmitAsync()">
                <span>提交</span>
            </button>
        </div>
        <div class="content">
            <table>
                <thead>
                    <th>序号</th>
                    <th>数据名称</th>
                    <th>解析值</th>
                    <th v-if="!ExamComponent.Default.HasContext.value">参考值</th>
                    <th v-if="!ExamComponent.Default.HasContext.value">结果</th>
                </thead>
                <tbody>
                    <tr v-for="(definition, index) of NewDefinitions" :key="definition.Id">
                        <td>{{ index + 1 }}</td>
                        <td>{{ definition.Sign }}</td>
                        <td>
                            <input class="reset" type="text" v-model="definition.Value" @keyup="changeValue">
                        </td>
                        <td v-if="!ExamComponent.Default.HasContext.value">
                            <span v-show="ProtocolComponent.Default.ShowParserReferences.value">{{ definition.Reference
                                }}</span>
                        </td>
                        <td v-if="!ExamComponent.Default.HasContext.value">
                            <img v-show="ProtocolComponent.Default.ShowParserResults.value" :src="definition.Value == definition.Reference
                ? '/static/Exam/ic_right.png'
                : '/static/Exam/ic_error.png'">
                        </td>
                    </tr>
                </tbody>
                <div v-if="ProtocolComponent.Default.HiddenDomain.value" style="opacity: 0;">heishou</div>
            </table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import ExamComponent, { ProtocolComponent, ProtocolDefinitionConfig } from './ExamComponent';

let definitions = computed(() => ProtocolComponent.Default.DefinitionConfigs.filter(Predicate));
let NewDefinitions = ref(definitions.value)
function changeValue() {
    ProtocolComponent.Default.HiddenDomain.value = !ProtocolComponent.Default.HiddenDomain.value
}
watch(ProtocolComponent.Default.ConfigId, (newValue, oldValue) => {
    if (oldValue != newValue) {
        let newObj: any[] = []
        ExamComponent.Default.MMWRRandomAgree.value.forEach((element: any) => {
            definitions.value.forEach((item: any) => {
                if (element.CanId == '0x201' && item.Type == 513) {
                    if (item.Sign == element.Attribute) {
                        newObj.push(item)
                    }
                } else if (element.CanId == '0x60A' && item.Type == 1546) {
                    if (item.Sign == element.Attribute) {
                        newObj.push(item)
                    }
                } else if (element.CanId == '0x60B' && item.Type == 1547) {
                    if (item.Sign == element.Attribute) {
                        newObj.push(item)
                    }
                } else if (element.CanId == '0x60D' && item.Type == 1549) {
                    if (item.Sign == element.Attribute) {
                        newObj.push(item)
                    }
                }
            });
        });
        console.log(newObj, '筛选的数据');
        if (newObj.length == 0) {
            NewDefinitions.value = definitions.value
        } else {
            NewDefinitions.value = newObj
        }
    }
});

function Predicate(config: ProtocolDefinitionConfig) {


    if (ExamComponent.Default.HasContext.value) {
        return config.Type == ProtocolComponent.Default.DataType.value;
        // return config.Type == ProtocolComponent.Default.DataType.value && ExamComponent.Default.HasContext.value
        //     && ExamComponent.Default.Context.MillimeterWaveRadar.has(config.Type)
        //     && ExamComponent.Default.Context.MillimeterWaveRadar.get(config.Type)!.Properties.includes(config.Sign);
    } else {
        return config.Type == ProtocolComponent.Default.DataType.value;
    }

}
</script>

<style scoped>
::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
}

::-webkit-scrollbar-thumb {
    background: rgba(129, 133, 156, 0.5);
    border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(129, 133, 156, 1);
}

::-webkit-scrollbar-track {
    border-radius: 0.5rem;
    background-color: rgba(129, 133, 156, 0.1);
}

.parser {
    padding-top: 2rem;

    display: flex;
    flex-direction: column;
    /* gap: 2rem; */

    overflow: hidden;
    border-bottom-right-radius: 1.5rem;
}

.header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;

    padding: 0 4rem;
}

.header>span {
    color: #B1B1D4;
    font-size: 2.5rem;
    font-weight: 600;
}

.header>button {
    width: 15rem;
    height: 4rem;

    border-radius: 0.6rem;
    background-color: #36384B;
}

.header>button:last-of-type {
    width: 12rem;
    height: 5rem;

    margin-left: auto;
}

.header>button>span {
    color: white;
    font-size: 1.8rem;
}

.header>button:hover {
    background-color: #A2A2FF80;
}

.header>button:last-of-type:hover {
    background: linear-gradient(180deg, #807DE1 0%, #218CDE 100%);
}

.content {
    max-height: 100%;
    margin-bottom: 2.5rem;
    overflow: overlay;
}

table {
    width: 100%;
}

thead {
    height: 4rem;

    position: sticky;
    top: 0;

    background-color: #131620;
}

thead::after {
    content: '';

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 0.1rem;

    background-color: #81859C1A;
}

th {
    height: 3.6rem;

    color: #81859C;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
}

th:nth-of-type(1) {
    width: 10%;
}

th:nth-of-type(2) {
    min-width: 30%;
}

th:nth-of-type(3) {
    min-width: 30%;
}

th:nth-of-type(4) {
    width: 20%;
}

th:nth-of-type(5) {
    width: 10%;
}

tr {
    line-height: 2rem;
}

td {
    padding: 1rem 0;

    color: #B1B1D4;
    font-size: 1.6rem;
    text-align: center;
    line-height: 2rem;
}

td>input {
    width: 100%;
    height: 3.6rem;

    color: white;

    border: solid 0.1rem #36384B;

    font-size: 1.8rem;
    text-align: center;
}

td>input:focus {
    border: solid 0.1rem;
    border-image: linear-gradient(90deg, rgba(128, 125, 225, 1), rgba(33, 140, 222, 1)) 1 1;
}
</style>